<template>
    <div id="console">
        <div id="left">

        </div>
        <div id="right">
            <codemirror id="code" class="code" v-model="code" :options="cmOptions"></codemirror>
        </div>
        <div id="submit">
            <el-button type="primary" icon="el-icon-edit" circle style="height: 70px;width: 70px;">提交</el-button>
        </div>
    </div>
</template>

<script>
    import {codemirror} from 'vue-codemirror'
    import 'codemirror/lib/codemirror.css'
    import 'codemirror/keymap/sublime'
    import "codemirror/theme/idea.css"
    import "codemirror/mode/python/python.js"
    import 'codemirror/addon/selection/active-line' //光标行背景高亮，配置里面也需要styleActiveLine设置为true
    export default {
        name: "Console",
        components:{
            codemirror
        },
        data() {
            return {
                code:"",
                cmOptions: {
                    tabSize: 4,// tab的空格个数
                    theme: 'idea',//主题样式
                    lineNumbers: true,//是否显示行数
                    lineWrapping: true, //是否自动换行
                    styleActiveLine: true, //line选择是是否加亮
                    matchBrackets: true, //括号匹配
                    mode: "python", //实现python代码高亮
                    readOnly: false //只读
                }
            }
        },
        methods: {},
        created() {

        },
        mounted() {
        }
    }
</script>

<style lang="scss">
    #console{
        margin-top: 10px;
    }
    #left{
        width: 49%;
        height: 580px;
        float: left;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    }
    #right{
        width: 49%;
        height: 580px;
        float: right;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    }
    #right{
        .CodeMirror {
            height: auto   !important;
        }
    }
    #submit{
        position: fixed;
        right: 20px;
        bottom: 120px;
    }
</style>
